<template>
  <views class="re_check">
    <!-- 批次信息 -->
    <div class="batch_information">
      <viewTitle :title="'批次信息'" :border="false"></viewTitle>
      <div class="batch_information_title">
        <div class="flex flexR batch_information_item">
          <div class="flex">
            <div class="information_item_title">企业编号:</div>
            <div class="information_item_content">{{detail.enterprise_sn||''}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">企业名称:</div>
            <div class="information_item_content">{{detail.enterprise_name||''}}</div>
          </div>
        </div>

        <div class="flex flexR batch_information_item">
          <div class="flex">
            <div class="information_item_title">服务商名称:</div>
            <div class="information_item_content">{{detail.facilitator_name||''}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">批次状态:</div>
            <div class="information_item_content">{{detail.status_desc||''}}</div>
          </div>
        </div>

        <div class="flex flexR batch_information_item">
          <div class="flex">
            <div class="information_item_title">商户批次号:</div>
            <div class="information_item_content">{{detail.enterprise_order_sn||''}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">提交时间:</div>
            <div class="information_item_content">{{detail.created_time||''}}</div>
          </div>
        </div>

        <div class="flex flexR batch_information_item">
          <div class="flex">
            <div class="information_item_title">交易笔数:</div>
            <div class="information_item_content">{{detail.total_count||''}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">交易金额:</div>
            <div class="information_item_content">{{detail.total_money||''}}</div>
          </div>
        </div>

        <div class="flex flexR batch_information_item">
          <div class="flex">
            <div class="information_item_title">批次来源:</div>
            <div class="information_item_content">{{detail.source||''}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">制单人:</div>
            <div class="information_item_content">{{detail.opreator_name||''}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 付款明细 -->

    <div class="payment_detail">
      <el-button type="danger" @click="exportExcel" icon="el-icon-download" class="export_btn">导出列表</el-button>
      <viewTitle :title="'付款明细'" :border="false"></viewTitle>
      <!-- 展示列表 -->
      <div class="table_list">
        <el-table
          border
          :data="payment_table"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
          <el-table-column fixed prop="enterprise_order_ext_sn" label="订单号" width="220"></el-table-column>
          <el-table-column prop="created_time" label="订单时间" width="200"></el-table-column>
          <el-table-column prop="real_money" label="交易金额" width="120"></el-table-column>
          <el-table-column prop="bank_account" label="收款户名" width="auto"></el-table-column>
          <el-table-column prop="bank_code" label="收款账号" width="auto"></el-table-column>
          <el-table-column prop="card_no" label="身份证" width="auto"></el-table-column>
          <el-table-column prop="payment_status_desc" label="业务状态" width="auto"></el-table-column>
          <el-table-column prop="pay_err_msg" label="应答描述" width="auto"></el-table-column>
        </el-table>
      </div>
      <div class="paging flex flexR">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="handleSizeChange($event)"
          @current-change="changePage($event)"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
    <!-- 操作日志 -->
    <div class="operation_log">
      <viewTitle :title="'操作日志'" :border="false"></viewTitle>
      <!-- 展示列表 -->
      <div class="table_list">
        <el-table
          border
          :data="order_log_list"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column prop="opreator_name" label="操作人" width="auto"></el-table-column>
          <el-table-column prop="created_time_desc" label="操作时间" width="auto"></el-table-column>
          <el-table-column prop="remarks" label="操作描述" width="auto"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 处理意见 -->
    <div class="treatment_suggestion" v-if="(this.getTerrace==1&&detail.status==0)||(this.getTerrace==3&&detail.status==1)">
      <viewTitle :title="'处理意见'" :border="false" ></viewTitle>
      <div class="treatment_suggestion_input" >
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          maxlength="80"
          show-word-limit
          v-model="suggest_text"
        ></el-input>
      </div>
      <!-- 按钮（通过、拒绝、暂不复核） -->
      <div class="btn_list flex flexR" >
        <el-button v-if="getTerrace == 1" type="primary" @click="changeOrderStatus(1)">通过</el-button>
        <el-button v-else type="primary" @click="changeOrderStatus(2)">通过</el-button>
        <el-button type="danger" @click="changeOrderStatus(5)">拒绝</el-button>
        <el-button type="warning" @click="toreturn">暂不复核</el-button>
      </div>
    </div>
  </views>
</template>





<script>
export default {
  data() {
    return {
      suggest_text: "", // 建议文本
      payment_table: [],
      detail: {}, //  批次信息
      order_log_list: [], //  操作日志
      pagination: {
        page_start: 1,
        page_size: 10
      }, // 分页  -  付款明细
      enterprise_order_id: "" // 当条信息-id
    };
  },
  computed: {
    getTerrace(){
      return  this.$store.state.terrace;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    //    复核=详情
    getData_detail(enterprise_order_id) {
      let res = {};
      if(this.getTerrace == 1){       //企业端
        res = this.$api.sendSync(this.$mapapi.e_getOrderDetail, {enterprise_order_id});
      }else if(this.getTerrace == 3){       //服务商端
        res = this.$api.sendSync(this.$mapapi.f_orderDetail, {enterprise_order_id});
      }
      if (res.code != 200 && res.code!=501) {
        this.$message.error(res.msg);
        return;
      }
      this.detail = res.data.detail || {};
      this.order_log_list = res.data.order_log_list || [];
      console.log('come res',res);
    },
    //   付款明细
    orderDetailList(enterprise_order_id) {
      let res = {};
      if(this.getTerrace == 1){       //企业端
        res = this.$api.sendSync(this.$mapapi.e_getOrderExt, {enterprise_order_id,pagination:this.pagination});
      }else if(this.getTerrace == 3){       //服务商端
        res = this.$api.sendSync(this.$mapapi.f_orderDetailList, {enterprise_order_id,pagination:this.pagination});
      }
      if (res.code != 200 && res.code != 500) {
        this.$message.error(data.msg);
        return;
      }
      this.payment_table = res.data.list || [];
      this.pagination = res.data.pagination || [];
      this.download_url = res.data.download_url || '';
    },


    //   返回
    toreturn() {
      this.$router.go(-1);
    },
    //   通过/拒绝    1/5
    changeOrderStatus(val) {
      let res = {};
      let post_data = {
        enterprise_order_id: this.enterprise_order_id,
        status: val,
        remarks: this.suggest_text
      };
      if (!this.suggest_text) {
        this.$message.error("请填写-处理意见反馈");
        return;
      }
      if(this.getTerrace == 1){
        res = this.$api.sendSync(this.$mapapi.e_changeOrderStatus, post_data);
      }else if(this.getTerrace == 3){
        res = this.$api.sendSync(this.$mapapi.f_changeOrderStatus, post_data);
      }
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success(res.msg);
      this.getData_detail(this.enterprise_order_id); // 详情
      this.orderDetailList(this.enterprise_order_id); // 付款明细
    },
    
    // 分页
    handleSizeChange(val){
          this.pagination.page_size=val;
          this.orderDetailList(this.enterprise_order_id);
    },
    changePage(val){
          this.pagination.page_start=val;
          this.orderDetailList(this.enterprise_order_id);
    },
    exportExcel(){
        let a = document.createElement('a')
        a.href = this.download_url;
        a.click()
    }
  },
  mounted() {
    this.$setRouteTitle();
    this.enterprise_order_id = this.$route.query.enterprise_order_id;
    this.getData_detail(this.enterprise_order_id); // 详情
    this.orderDetailList(this.enterprise_order_id); // 付款明细
  }
};
</script>

<style lang="less" :scope="true"  src="@/style/issuing/re_check.less" >
</style>